<template>
  <!-- 新建订单 - 列表页面 -->
  <view class="create-order-container">
    <!-- 车辆信息 -->
    <car-info-header></car-info-header>

    <!-- 填写信息部分 -->
    <view class="form-section">
      <!-- 实物产品 -->
      <view class="product-box">
        <!-- 标题项 -->
        <view class="title-box flex flex-ai-c">
          <view class="title flex flex-ai-c">
            <view class="line"></view>
            <text>实物产品</text>
          </view>
          <view class="right-item">价格</view>
          <view class="right-item">数量</view>
        </view>

        <!-- 产品项 -->
        <view class="list">
          <uni-swipe-action>
            <view v-for="(item1, index1) in groupList" :key="index1">
              <view
                v-for="(item, index) in item1.goodsServiceList"
                :key="index"
              >
                <uni-swipe-action-item
                  :right-options="rightOptions"
                  :disabled="isSubmit"
                  @click="delChange(index, index1, item1.isMustAll, true)"
                  v-if="item.goodsRuleType === 1"
                >
                  <view class="item flex flex-ai-c flex-jc-sb">
                    <view class="title m-line-text-2">{{ item.name }}</view>
                    <view class="right-item color-EB5C02"
                      >￥{{ item.sale_Price }}</view
                    >
                    <!-- 未提交订单显示 -->
                    <view v-if="!isSubmit" class="num-box flex flex-ai-c">
                      <view
                        class="btn"
                        @click="less(item, index1, item1.isMustAll)"
                      >
                        <u-icon name="minus" color="#999999" size="32"
                          >-</u-icon
                        >
                      </view>
                      <input type="number" v-model="item.count" class="cont" />
                      <view
                        class="btn"
                        @click="add(item, index1, item1.isMustAll)"
                      >
                        <u-icon name="plus" color="#999999" size="32">-</u-icon>
                      </view>
                    </view>
                    <!-- 已提交订单显示 -->
                    <view v-else class="right-item">x{{ item.count }}</view>
                  </view>
                </uni-swipe-action-item>
              </view>
            </view>
            <view v-for="(item, index) in productList" :key="index">
              <uni-swipe-action-item
                :right-options="rightOptions"
                :disabled="isSubmit"
                @click="delChange(index, index, false, false)"
              >
                <view class="item flex flex-ai-c flex-jc-sb">
                  <view class="title m-line-text-2">{{
                    item.productName
                  }}</view>
                  <view class="right-item color-EB5C02"
                    >￥{{ item.productPrice }}</view
                  >
                  <!-- 未提交订单显示 -->
                  <view v-if="!isSubmit" class="num-box flex flex-ai-c">
                    <view class="btn" @click="less2(item)">
                      <u-icon name="minus" color="#999999" size="32">-</u-icon>
                    </view>
                    <input
                      type="number"
                      v-model="item.productCount"
                      class="cont"
                    />
                    <view class="btn" @click="add2(item)">
                      <u-icon name="plus" color="#999999" size="32">-</u-icon>
                    </view>
                  </view>
                  <!-- 已提交订单显示 -->
                  <view v-else class="right-item"
                    >x{{ item.productCount }}</view
                  >
                </view>
              </uni-swipe-action-item>
            </view>
          </uni-swipe-action>

          <!-- 添加产品按钮 -->
          <view
            v-if="!isSubmit"
            class="item btn-add flex flex-ai-c flex-jc-fe"
            @click="goodsShow = true"
          >
            <i-icon icon="icontianjia_1" size="34rpx" color="#FBB000"></i-icon>
            <text class="font-28 color-FBB000 ml-10">添加商品</text>
          </view>
        </view>
      </view>

      <!-- 施工服务 -->
      <view class="serve-box">
        <!-- 标题项 -->
        <view class="title-box flex flex-ai-c">
          <view class="title flex flex-ai-c">
            <view class="line"></view>
            <text>施工服务</text>
          </view>
          <view class="right-item">价格</view>
          <view class="right-item">数量</view>
        </view>

        <!-- 服务项 -->
        <view class="list">
          <view v-for="(item1, index1) in groupList" :key="index1">
            <view v-for="(item, index) in item1.goodsServiceList" :key="index">
              <view
                v-if="item.goodsRuleType === 2"
                @click="
                  servePopupOpen(item, index1, index, item1.isMustAll, true)
                "
                class="item flex flex-ai-c flex-jc-sb"
              >
                <view class="title m-line-text-2">{{ item.name }}</view>
                <view class="right-item color-EB5C02"
                  >￥{{ item.sale_Price }}</view
                >
                <view class="right-item">
                  <text>x{{ item.count }}</text>
                  <u-icon
                    v-if="!isSubmit"
                    name="arrow-right"
                    size="24rpx"
                    color="#999"
                    class="icon-right"
                  ></u-icon>
                </view> </view
            ></view>
          </view>
          <view
            v-for="(item, index) in serveList"
            :key="index"
            class="item flex flex-ai-c flex-jc-sb"
            @click="servePopupOpen(item, index, 0, false, false)"
          >
            <view class="title m-line-text-2">{{ item.serviceName }}</view>
            <view class="right-item color-EB5C02"
              >￥{{ item.servicePrice }}</view
            >
            <view class="right-item">
              <text>x{{ item.serviceCount }}</text>
              <u-icon
                v-if="!isSubmit"
                name="arrow-right"
                size="24rpx"
                color="#999"
                class="icon-right"
              ></u-icon>
            </view>
          </view>

          <view v-if="!hasProduct[1]" class="not-data">
            <text>暂无服务项目</text>
          </view>
        </view>
      </view>

      <!-- 关联检测异常 -->
      <!-- <view class="serve-box"> -->
      <!-- 标题项 -->
      <!-- <view class="title-box flex flex-ai-c flex-jc-sb">
          <view class="title flex flex-ai-c">
            <view class="line"></view>
            <text>关联检测异常</text>
          </view>
          <view>
            <u-icon name="arrow-right" size="28rpx" color="#999" class="icon-right"></u-icon>
          </view>
        </view>
      </view> -->

      <!-- 安装类型 -->
      <view class="install-type-box">
        <!-- 标题项 -->
        <view class="title-box flex flex-ai-c flex-jc-sb">
          <view class="title flex flex-ai-c">
            <view class="line"></view>
            <text>安装类型</text>
          </view>
          <view class="right-box flex flex-ai-c flex-jc-fe">
            <view class="item">{{ installMode.name }}</view>
            <!-- <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon> -->
          </view>
        </view>
      </view>

      <!-- 商品金额部分 -->
      <view class="goods-price-box">
        <view class="item flex flex-ai-c flex-jc-sb">
          <text>商品金额</text>
          <text>￥{{ priceData.goodsPrice.toFixed(2) }}</text>
        </view>
        <view class="item flex flex-ai-c flex-jc-sb">
          <text>服务金额</text>
          <text>￥{{ priceData.servePrice.toFixed(2) }}</text>
        </view>
        <view class="item flex flex-ai-c flex-jc-sb" v-show="isPackage === 2">
          <text>优惠券</text>
          <!-- 点击跳转到选择卡券列表页面 -->
          <view
            v-if="detailData.statusStr === '待提交'"
            @click="goCouponPage(0)"
            class="flex-w-1"
          >
            <text class="mr-10 color-999">
              ￥{{ priceData.couponsMoney2 }}
            </text>
            <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
          </view>

          <!-- 未选优惠卡券 -->
          <view v-else class="flex-w-1">未选择优惠券</view>
        </view>
        <view class="item flex flex-ai-c flex-jc-sb" v-show="isPackage === 1">
          <text>套餐卡</text>
          <!-- 点击跳转到选择卡券列表页面 -->
          <view @click="goCouponPage(1)" class="flex-w-1">
            <text class="mr-10 color-999">
              {{ couponName }}
              <text class="color-EB5C02" style="padding-left: 20rpx"
                >-￥{{ Math.abs(priceData.couponsMoney).toFixed(2) }}</text
              >
            </text>
            <!-- <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon> -->
          </view>
        </view>
        <view class="item flex flex-ai-c flex-jc-sb">
          <text>优惠</text>
          <text>-￥{{ Math.abs(priceData.couponAllMoney).toFixed(2) }}</text>
        </view>
        <view class="item flex flex-ai-c flex-jc-fe">
          <text class="color-999">合计：</text>
          <text class="color-EB5C02">￥{{ priceData.totalPrice }}</text>
        </view>
      </view>

      <!-- 备注 -->
      <view class="remark-box">
        <view class="item flex flex-jc-sb">
          <text>备注</text>
          <textarea
            type="text"
            v-model="remark"
            placeholder="请填写备注"
            auto-height
            class="remark-input"
          />
        </view>
      </view>

      <!-- 提交订单显示 -->
      <view
        v-if="detailData.statusStr === '待付款'"
        class="item flex flex-ai-c flex-jc-sb"
      >
        <text>订单号</text>
        <text>{{ confirmInfo.orderNo || '1M5465551515487' }}</text>
      </view>
    </view>

    <!-- 支付收款码 -->
    <view v-if="detailData.statusStr === '待付款'" class="pay-qrcode">
      <u-tabs
        :list="tabPayTitleList"
        active-color="#FBB000"
        inactive-color="#666"
        font-size="28"
        :is-scroll="false"
        bar-height="8"
        bar-width="110"
        :height="100"
        :duration="0.2"
        :current="payTitleIndex"
        @change="tabPayChange"
      ></u-tabs>

      <view class="content" v-show="payTitleIndex !== 2">
        <view class="title">
          客户使用{{ payTitleIndex === 0 ? '支付宝' : '微信' }}扫码支付
        </view>
        <view class="qr-code">
          <view v-if="payTitleIndex === 0" class="img">
            <tki-qrcode
              ref="aliqrcode"
              cid="aliCid"
              :val="detailData.aliPayQrImg"
              :size="464"
              @result="qrResult"
            />
          </view>
          <view v-if="payTitleIndex === 1" class="img">
            <tki-qrcode
              ref="wxqrcode"
              cid="wxCid"
              :val="detailData.weChatPayQrImg"
              :size="464"
              @result="qrResult"
            />
          </view>
          <!-- <image :src="payTitleIndex===0 ? detailData.aliPayQrImg : detailData.weChatPayQrImg" mode="widthFix" class="img"></image> -->
        </view>
      </view>
      <view class="content" v-show="payTitleIndex === 2">
        <view class="title"> 客户使用现金支付（请上传收据） </view>
        <view class="bill">
          <view class="bill-img" @click="choosePic">
            <image class="img" :src="billImg" mode="aspectFit" />
          </view>
          <view class="bill-remark">
            <textarea
              v-model="billRemark"
              class="color-333 font-24"
              placeholder="备注说明（选填）"
              maxlength="140"
            />
            <view class="remark-number"
              ><text class="color-FBB000">{{ billRemark.length }}</text
              >/140</view
            >
          </view>
        </view>
        <view class="bill-sub">
          <button
            color="#333"
            shape="circle"
            class="sub btn-primary"
            @click="cashPayments"
          >
            提交
          </button>
        </view>
      </view>
    </view>

    <!-- 底部固定按钮 -->
    <view class="btn-box flex flex-ai-c">
      <view class="btn" @click="delOrder()">
        <i-button
          text="删除"
          bg-color="#333"
          color="#FFE23E"
          shape="circleLeft"
        ></i-button>
      </view>
      <view class="btn" @click="submit()">
        <i-button text="提交" color="#333" shape="circleRight"></i-button>
      </view>
    </view>

    <!-- 
    ---------- 弹框部分 ---------- 
     -->
    <!-- 添加商品 -->
    <u-popup mode="bottom" v-model="goodsShow" border-radius="30">
      <add-goods-popup @change="addGoodsChange"></add-goods-popup>
    </u-popup>

    <!-- 编辑服务 -->
    <u-popup mode="bottom" v-model="serveShow" border-radius="30">
      <edit-serve-popup
        ref="serve"
        :isPackage="serveIsPackage"
        @change="editServeChange"
      ></edit-serve-popup>
    </u-popup>

    <!-- 安装方式 -->
    <u-popup mode="bottom" v-model="installModeShow" border-radius="30">
      <install-mode-popup ref="installMode"></install-mode-popup>
    </u-popup>
  </view>
</template>

<script src="./submitOrderDetailByCoupon.js"></script>

<style lang="scss" scoped>
.create-order-container {
  min-height: 100vh;
  padding-bottom: 140rpx;
  background-color: #f4f4f4;

  .form-section {
    padding: 0 24rpx;
  }
}

.flex-w-1 {
  flex: 1;
  text-align: right;
}

@mixin publicBox() {
  margin-top: 22rpx;
  padding: 0 20rpx;
  background: #ffffff;
  border-radius: 10rpx;
  font-size: 28rpx;

  .title-box {
    height: 86rpx;
    line-height: 86rpx;

    .title {
      width: 50%;

      .line {
        width: 8rpx;
        height: 30rpx;
        background: #ffe23e;
        border-radius: 4rpx;
      }

      text {
        margin-left: 12rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #666666;
      }
    }

    .right-item {
      width: 15%;
      font-size: 28rpx;
      font-weight: 500;
      color: #999999;
      text-align: center;

      &:last-child {
        width: 25%;
        margin-left: auto;
      }
    }
  }

  // 列表
  .list {
    .title {
      width: 38%;
    }

    .item {
      width: 100%;
      padding: 24rpx 0;
      border-top: 1px solid #eee;

      // 计数器
      .num-box {
        border: 1px solid #eee;
        border-radius: 10rpx;

        .btn {
          width: 48rpx;
          text-align: center;
          color: #999;
        }
        .cont {
          width: 48rpx;
          height: 48rpx;
          // background-color: #EEEEEE;
          border-left: 1px solid #eee;
          border-right: 1px solid #eee;
          border-radius: 10rpx;
          text-align: center;
        }
      }
    }

    .right-item {
      width: 15%;
      font-size: 28rpx;
      font-weight: 500;
      text-align: center;

      &:last-child {
        width: 25%;
      }
    }
  }
}

// 实物产品
.product-box {
  @include publicBox();
}

// 施工服务
.serve-box {
  @include publicBox();

  // 处理右边箭头布局对齐
  .list {
    .right-item {
      position: relative;

      text {
        margin-left: auto;
      }

      .icon-right {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }

    // 无服务项目
    .not-data {
      padding: 35rpx 0;
      border-top: 1px solid #eee;
      font-size: 28rpx;
      color: #999999;
      text-align: center;
    }
  }
}

// 检测异常列表
.err-list {
  .item {
    display: inline-block;
    width: 50%;
    padding: 32rpx 0;
    border-top: 1px solid #eee;
  }

  .err-label {
    font-size: 26rpx;
    font-weight: bold;
    color: #333;
  }

  .err-name {
    display: inline-block;
    padding: 18rpx 25rpx;
    margin: 18rpx 0;
    background-color: #fff7f7;
    font-size: 24rpx;
    color: #eb5c02;
    border-radius: 10rpx;
  }

  .err-img {
    width: 266rpx;
    height: 200rpx;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }

    .img-bottom-text {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 50rpx;
      line-height: 50rpx;
      padding-left: 22rpx;
      background: rgba(0, 0, 0, 0.4);
      font-size: 22rpx;
      color: #fff;
    }
  }

  // 无服务项目
  .not-data {
    padding: 35rpx 0;
    border-top: 1px solid #eee;
    font-size: 28rpx;
    color: #999999;
    text-align: center;
  }
}

// 安装类型
.install-type-box {
  @include publicBox();

  .title-box {
    .right-box {
      .item {
        margin-right: 20rpx;
        color: #333;
      }
    }
  }
}

// 商品金额部分
.goods-price-box {
  @include publicBox();

  .item {
    padding: 30rpx 0;

    & + .item {
      border-top: 1px solid #eee;
    }
  }
}

// 备注
.remark-box {
  @include publicBox();

  .item {
    padding: 30rpx 0;
  }

  .remark-input {
    padding-left: 100rpx;
    font-size: 28rpx;
    text-align: right;
  }
}

// 支付收款码
.pay-qrcode {
  @include publicBox();

  .content {
    border-top: 1px solid #eee;

    .title {
      padding: 50rpx 0;
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;
      text-align: center;
    }

    .qr-code {
      padding: 0 95rpx 30rpx;
      text-align: center;

      .img {
        width: 100%;
      }
    }

    .bill {
      padding: 0 40rpx;
      .bill-img {
        width: 370rpx;
        height: 278rpx;
        margin: 0 auto;

        .img {
          width: 370rpx;
          height: 278rpx;
        }
      }

      .bill-remark {
        width: 100%;
        height: 240rpx;
        background: #f8f8f8;
        border-radius: 10rpx;
        padding: 20rpx 24rpx;
        margin-top: 50rpx;
        margin-bottom: 27rpx;
        position: relative;

        .remark-number {
          position: absolute;
          bottom: 20rpx;
          right: 20rpx;
          font-size: 24rpx;
          color: #999;
        }
      }
    }

    .bill-sub {
      padding: 0 40rpx 34rpx;

      .sub {
        width: 100%;
      }
    }
  }
}

// 底部按钮
.btn-box {
  position: fixed;
  bottom: 0;
  z-index: 6;
  width: 100%;
  height: 120rpx;
  padding: 0 24rpx;
  background-color: #fff;

  .btn {
    width: 50%;

    .i-button {
      width: 100%;
    }
  }
}

/deep/ uni-button:after {
  border: none;
}
</style>
